<template>
  <div class="Content">
    <Tbale
        :isSelect="true"
        :table-data="tableData"
        :table-column="tableColumn"
        @pagination-change="getList"
        v-model:page-num="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :total="total"
    >
      <template #name="{row}">{{ row }}+1</template>
      <template #sex="{row}">{{ row }}</template>
    </Tbale>
  </div>
</template>
<script setup lang="ts">
import Tbale from '@/components/Table/ElTable.vue'
import {reactive, ref} from "vue";
import {listMenu} from "@/api/system/menu.ts";
const queryForm=ref(
    {
      pageNum:1,
      pageSize:10
    }
)
const total=ref(100)

const getList = () => {
  listMenu(queryForm.value).then((res)=>{

  })
}
const tableData = ref<Array<Object>>([
  {
    name: "张三",
    sex: '张三',
    age: '2'
  },
  {
    name: '李四',
    sex: '张三',
    age: '2'
  },
  {
    name: "王五",
    sex: '张三',
    age: '2'
  },
])

const tableColumn = ref<Array<Object>>([
  {
    label: '张三',
    prop: 'name',
    slot: true,
  },
  {
    label: '里斯',
    prop: 'sex',
    slot: true,
  },
  {
    label: '王五',
    prop: 'age',

  },
])

</script>
<style scoped>
.Content {

}

.login-tabs {
  padding: 5%;
  width: 18vw;
  border: 1px solid #a8a8a8;
  border-radius: 5px;
  box-shadow: 0 0 5px #72767b;
}


</style>
